page-client-detail {
    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    ion-header {
        ion-toolbar{
            background: linear-gradient(to right, #63b24c, #018c6e);
            .toolbar-background-ios{
                background: linear-gradient(to right, #63b24c, #018c6e);
            }
            .toolbar-content-ios{
                background: linear-gradient(to right, #63b24c, #018c6e);
            }
        }
        .base-info {
            background: linear-gradient(to right, #63b24c, #018c6e);
            position: relative;
            top:-1vw;
            width: 100%;
            z-index: 99;
            padding-top: computed-vw(34);
            .baseMessage {
                padding:0 computed-vw(60) computed-vw(50) computed-vw(60);
                overflow: hidden;
                position: relative;
                .client-panel {
                    p {
                        margin: 0;
                        display: flex;
                        align-items: center;
                    }
                    .base-msg {
                        font-size: 4.1vw;
                        color: #FFFFFF;
                        display: flex;
                        align-items: center;
                        .sex-content{
                            display: inline-block;
                            width:auto;
                            height:computed-vw(68);
                        }
                        .name-content{
                            font-size:computed-vw(54);
                            margin-left:computed-vw(20);
                            margin-right: computed-vw(24);
                            max-width: 54vw;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            &.load{
                                color:transparent;
                            }
                        }
                        .age-content{
                            font-size: computed-vw(36);
                        }
                    }
                    .age {
                        font-size: 4.8vw;
                        padding-top: 1vw;
                        color: #FFFFFF;
                        .sexCode {
                            width: 4.62vw;
                            height: 4.62vw;
                            margin-right: 1vw;
                        }
                    }
                }
                .collect-panel{
                    position: absolute;
                    top:0;
                    right:0;
                    width:computed-vw(246);
                    height:computed-vw(80);
                    padding:computed-vw(17.5) 0 computed-vw(17.5) 3vw;
                    display: flex;
                    align-items: center;
                    border-top-left-radius: 6vw;
                    border-bottom-left-radius: 6vw;
                    border:0.35vw solid #e7b82e;
                    color:#e7b82e;
                    border-right: none;
                    font-size:computed-vw(42);
                    i{
                        display: inline-block;
                        margin-right: computed-vw(10);
                        width:computed-vw(45);
                        height:computed-vw(45);
                        background: url("../assets/images/common/icon_collect_no.png") no-repeat;
                        background-size: cover!important;
                        margin-top: -0.1vw;
                    }
                }
                .collect-panel.isFavorited{
                    background-color:#e7b82d;
                    opacity: 1;
                    color:#fff;
                    i{
                        display: inline-block;
                        margin-right: computed-vw(10);
                        width:computed-vw(45);
                        height:computed-vw(45);
                        background: url("../assets/images/client/client-detail/icon_favorites_yes.png") no-repeat;
                    }
                }
            }
        }
    }
    ion-content {
        .main-content {
            padding: 0 computed-vw(60) 20vw computed-vw(60);
            //销售线索
            .saleLeads {
                height: 28.42vw;
                display:none;
                p {
                    font-size: 4.62vw;
                    color: #1f212a;
                }
                .signList {
                    position: relative;
                    span {
                        border-radius: 5vw;
                        color: #1f212a;
                        background: #e9e9e9;
                        margin-right: 1.85vw;
                        padding: 1vw 3vw;
                        font-size: 3.89vw;
                        margin-bottom: 2vw;
                        display: inline-block;
                        height: 6.67vw;
                    }
                    .leadsMore {
                        line-height: 2.67vw;
                        position: absolute;
                        display: inline-block;
                    }
                }
            }
            .con-grid {
                height: 25vw;
                padding-top: 8vw;
                .con-col {
                    float: left;
                    .col-title {
                        font-size: 4.44vw;
                        color: #1f212a;
                        padding-bottom: 2vw;
                    }
                    .col-content {
                        font-size: 4.27vw;
                        color: #39b54a;
                    }
                }
                .col1 {
                    width: 15%;
                    text-align: center;
                }
                .col2 {
                    width: 70%;
                    text-align: center;
                }
                .col3 {
                    width: 15%;
                    text-align: center;
                }
            }
            .toggle-panel {
                //margin-bottom: 6vw;
                .toggle-head {
                    text-align: center;
                    height: computed-vw(100);
                    button {
                        width: 30vw;
                        height: 10vw;
                        background-color: transparent;
                        color: #999;
                        display: flex;
                        align-items: center;
                        margin: 0 auto;
                        text-align: center;
                        padding:0 0 0 13.055vw;
                        i{
                            display: inline-flex;
                            vertical-align: middle;
                            width: computed-vw(42);
                            height: computed-vw(42);
                            margin-right: computed-vw(12);
                        }
                        .up {
                            background: url("../assets/images/client/client-detail/icon_up.png") no-repeat;
                            background-size: cover;
                        }
                        .down {
                            background: url("../assets/images/client/client-detail/icon_more.png") no-repeat;
                            background-size: cover;
                            background-position: 0 -1px;
                        }
                        span{
                            font-size: computed-vw(36);
                            line-height: computed-vw(42);
                            height: computed-vw(42);
                        }
                    }
                }
            }
            .panel-title {
                font-size: computed-vw(54);
                color: #1f212a;
                padding: computed-vw(40) 0;
                position: relative;
                &>span{
                    position: relative;
                    padding-left: computed-vw(30);
                    &::after{
                        content:'';
                        display: block;
                        position: absolute;
                        top:50%;
                        left:0;
                        margin-top: -2.685vw;
                        height:computed-vw(54);
                        width:computed-vw(10);
                        background-color: #35ac63;
                    }
                }
                button {
                    background-color: transparent;
                    color: #39b54a;
                    padding: 0;
                    position: absolute;
                    right:0;
                    top:50%;
                    margin-top: -2.4vw;
                    height:5vw;
                    padding-left: 5vw;
                    span {
                        font-size: computed-vw(42);
                    }
                    .icon-edit {
                        display: block;
                        width: computed-vw(45);
                        height: computed-vw(45);
                        font-style: normal;
                        background: url("../assets/images/client/client-detail/icon_editor.png") no-repeat;
                        background-size: cover;
                        margin-right: computed-vw(18);
                        position: absolute;
                        top:1px;
                        left:0;
                    }
                }
            }
            .word-break {
                overflow: hidden;
            }
            .panel-item {
                font-size: computed-vw(45);
                line-height: computed-vw(100);
                clear:both;
                overflow: hidden;
                span:first-child {
                    color: #333;
                }

                span:last-child {
                    color: #333;
                    float: right;
                }
                span.nameLength{
                    word-wrap: break-word;
                    display: block;
                    width: 84%;
                    text-align: right;
                }
                span.address {
                    word-wrap: break-word;
                    display: block;
                    width: 84%;
                    text-align: right;
                    word-break: break-all;
                }
                span.phone{
                    float: left;
                }
                span.phoneNum{
                    width:84%;
                    text-align: right;
                    display: inline-block;
                    word-wrap: break-word;
                }
                span.empty{
                    color:#333;
                }
            }
            .panel-item.last{
                border:0!important;
            }
            .panel-item.last:after{
                display: none!important;
            }
            .nameLengthBox{
                overflow: hidden;
            }
            .panel-item.no-border {
                border: 0;
            }
            .del-panel {
                padding: 5.3vw 0;
                text-align: center;
                .deleteBtn {
                    width: 100%;
                    height: computed-vw(96);
                    color: #FFFFFF;
                    background-color: #e66660;
                    font-size:computed-vw(45);
                    border-radius: 1vw;
                }
            }
        }
    }
    ion-fab.client-detail-btn-panel{
        width:100vw;
        height:computed-vw(150);
        background-color: #fff;
        left:0;
        bottom:0;
        margin: 0;
        padding: 0;
        box-shadow: -1vw 0 16vw 1vw #eee;
        ion-icon{
            display: none;
        }
        .button-inner{
            width:100%;
            padding:0 computed-vw(60);
        }
        .btn-box{
            margin:0 auto;
            padding:0;
            width:100%;
            border-radius: 0;
            background-color: #fff!important;
            .btn-component{
                height:computed-vw(100);
                width:50%;
                display: flex;
                align-items: center;
                color:#fff;
                font-size: computed-vw(42);
                margin:0;
                padding:0;
                i{
                    display: inline-block;
                    width:computed-vw(60);
                    height:computed-vw(60);
                    margin-right: computed-vw(15);
                    background-size:cover!important;
                }
            }
            .btn-map{
                background-color: #018c6e;
                margin-right: computed-vw(29);
                i{
                    background: url('../assets/images/client/client-detail/icon_directions.png') no-repeat;
                }
            }
            .btn-call{
                background-color: #35ac63;
                i{
                    background: url("../assets/images/client/client-detail/icon_call.png") no-repeat;
                }
            }
            .btn-component[disabled]{
                background-color: #bcbec1;
            }
        }
    }
    .select-ios {
        display: none;
    }
}
